<?php
//css
echo $this->Html->css(array('jquery.cluetip'), false);
//js
echo $this->Html->script(array('plugins/jquery.cluetip'), false);

$this->Html->scriptStart(array('inline' => false));
echo '
      $(function(){
        $("img.logo").each(function(index, value) {
          $(this).attr("title",$(this).attr("rel"));
        });
        $("img.logo").cluetip({attribute : "rel", cluetipClass: "jtip", arrows: true, splitTitle : "|",  positionBy : "mouse" , topOffset : 20, leftOffset : 40,
          hoverIntent: {
            sensitivity:  30,
            interval: 200,
            timeout: 0
          },
          fx :{open : "fadeIn", speed : "slow"}
        });
      });
       ';
$this->Html->scriptEnd();
?>
<div>
  <h1 class="inline">Services</h1>
  <?php if(empty($services)) { ?>
    <p>No services are currently available.</p>
  <?php } else {
    echo '<div id="servicesContainer" style="position: relative;">';
    foreach($services as $service) { $rec = $service['Service'];
    $thumb = !empty($rec['image_path']) ? $rec['image_path'] : Configure::read('App.servicesDefaultImage');
    ?>

    <div class="ad_logo"> <?php echo $this->Html->image($thumb, array('alt' => $rec['name'],'title'=>$rec['name'],'class'=>'center logo', 'rel'=>$rec['name'].'|'.$rec['description'], 'url'=>array('controller'=>'services', 'action'=>'products',$rec['id'])))?>
      <div><span class="ad_logo_text"><?php echo $rec['name'];?></span></div>
    </div>
  <?php }
  echo "</div>";

   echo $this->element('main_pagination');
  } ?>
</div>